<!-- 模板 -->
<template>
  <div class="">
    <img width="40%" src="../assets/logo.png">
    <p><b>{{message}}</b>-三级联动选择器</p>
    <button @click="startCascader">打开</button>
    <cascader
    :show="cascader_show"
    :dataArr="cascader_data"
    @hide="cascader_hide"
    @cascaderShow="onVisibleChange"
    @cascaderSelect="changeOnSelect"
    @cascaderResult="onchangeok"> 
    </cascader>
    <!-- calendar-selector：日历选择器 -->
  </div>
</template>

<!-- js -->
<script>
import Cascader from '@/components/cascader'

export default {
  name: 'test2',
  data () {
    return {
      message: 'cascader',
      cascader_show: false,
      cascader_data: [{
          value: 'beijing',
          label: '北京',
          children: [
              {
                  value: 'gugong',
                  label: '故宫',
                  children: [
                    {
                      value: 'dongyuan',
                      label: '东院'
                    },
                    {
                      value: 'xiyuan',
                      label: '西院'
                    },
                    {
                      value: 'nanyuan',
                      label: '南院'
                    },
                    {
                      value: 'beiyuan',
                      label: '北院'
                    },
                    {
                      value: 'zhongyuan',
                      label: '中院'
                    },
                  ]
              },
              {
                  value: 'tiantan',
                  label: '天坛'
              },
              {
                  value: 'wangfujing',
                  label: '王府井'
              },
              {
                  value: 'yuanmingyuan',
                  label: '圆明园'
              },
              {
                  value: 'yiheyuan',
                  label: '颐和园'
              }
          ]
      }, {
          value: 'jiangsu',
          label: '江苏',
          children: [
              {
                  value: 'nanjing',
                  label: '南京',
                  children: [
                      {
                          value: 'fuzimiao',
                          label: '夫子庙',
                      }
                  ]
              },
              {
                  value: 'suzhou',
                  label: '苏州',
                  children: [
                      {
                          value: 'zhuozhengyuan',
                          label: '拙政园',
                      },
                      {
                          value: 'shizilin',
                          label: '狮子林',
                      }
                  ]
              }
          ],
      }],
    }
  },
  components: {
    Cascader
  },
  methods: {
    startCascader: function (data) {
      this.cascader_show = true
    },
    cascader_hide: function (data) {
      this.cascader_show = false
      console.log('关闭三级选择器')
      console.log(data)
    },
    onVisibleChange: function (data) {
      console.log('打开三级选择器')
      console.log(data)
    },
    changeOnSelect: function (data) {
      console.log(data)
    },
    onchangeok: function (data) {
      console.log(data)
      this.cascader_show = false
    }
  }
}
</script>

<!-- style -->
<style scoped>
/*style*/
</style>
